<style scoped> 
  .appNav {

    margin-bottom: 1px;
    background: rgba(33, 150, 243, 0.2);
    box-shadow: #111 0px 0px 5px;
  }

  .appNav .navbar-brand {

    height: 30px;
    line-height: 15px;
    font-size: 20px;


  }

  .appNav .navbar-nav>li>a {
    height: 66px;
    line-height: 50px;
    font-size: 25px;
    font-weight: bold;
    /* padding-right: 0px !important; */
  }

  .appNav .dropdown-menu>li>a {

    height: 60px;
    line-height: 60px;
    font-size: 20px;
  }



</style>

<style>

  .layer-custom .layui-layer-dialog{
  width: 400px !important;
  height: 280px !important;
  left: 320px !important;
  
}
.layer-custom .layui-layer-title{
  font-size: 30px !important;
  height: 60px;
  line-height: 60px;
}
.layer-custom .layui-layer-content{
  margin-top: 20px;
  padding: 52px !important;
  font-size: 28px !important;
}

.layer-custom .layui-layer-btn a{
  height: 50px !important;
  font-size: 25px !important;
  line-height: 50px !important;
}
.count-info{
  display: block;
  width: 50px;
  height: 50px;
  position:absolute;
  top: 12px;
  left: 150px;
}
.count-info .label {
  line-height: 12px;
  padding: 1px 5px;
  position: absolute !important;
  right: 0px;
  top: 1px;
  font-size: 15px;

}
.count-info i{
  top:12px;
  position: absolute;
  color: #FFF;
  left:10px;
}
</style>


<template>
  <div id="app" @click="appActive">
    <div class="app" v-cloak @click="appActive">
      <!--页面主体，头部区域-->


      <div>
        <nav class="navbar navbar-inverse appNav" style="height:70px" role="navigation">
          <div class="container-fluid">
            <!-- 导航头部 -->
            <div class="navbar-header" style="margin-left: -8px;margin-top: 12px">
              <span v-if="clientInfo!=null" class="navbar-brand"> <span class="label label-danger" style="font-size: 26px">{{clientInfo.ClientCode}}号终端</span></span>
              <!-- <mu-badge v-show="warningCount==0" :content="warningCount" circle color="red">
                <mu-button @click="warningClick" icon :color="warningColor">
                  <mu-icon value="notifications"></mu-icon>
                </mu-button>
              </mu-badge> -->
              <span class="count-info" @click="warningClick" v-if="warningCount>0"  href="javascript:void(0)">
                <i class="fa fa-bell fa-2x" style="color:#FFF"></i> <span class="label label-danger">{{warningCount}}</span>
              </span>
            </div>
            <!-- 导航项目 -->
            <div class="collapse navbar-collapse navbar-collapse-example">
              <!-- 一般导航项目 -->
              <ul v-if="userInfo!= null" class="nav navbar-nav navbar-right" style="margin-right:-15px">
                <!-- 导航中的下拉菜单 -->
                <li class="dropdown active">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{userInfo.RoleName}}：{{userInfo.RealName}}
                    <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu" role="menu">
                    <li>
                      <a href="javascript:void(0)" @click="userifoUpdate">用户信息</a>
                    </li>
                     <li>
                      <a href="javascript:void(0)" @click="pwdUpdate">修改密码</a>
                    </li>
                    <li>
                      <a href="javascript:void(0)" @click="faceAdd">录入人脸</a>
                    </li>
                    <li>
                      <a href="javascript:void(0)" @click="userSignOut">注销账户</a>
                    </li>
                    <li v-show="currentInfo.RoleName=='管理员'">
                      <a href="javascript:void(0)" @click="shutdownPower">关闭电源</a>
                    </li>
                    <li v-show="userInfo.Account=='admin'">
                      <a href="javascript:void(0)" @click="LogOut">退出系统</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
            <!-- END .navbar-collapse -->
          </div>
        </nav>
      </div>
      <div class="rows col-center-block countTimer" style="width: 96%;height: 100px;line-height: 100px">
        <div class="col-xs-6">
          {{countDownTimer>0?countDownTimer+'s':''}}
        </div>
        <div class="col-xs-6 text-right">
          <span style="font-size: 40px">{{pageTitle}}</span>
        </div>

      </div>

      <router-view ref="child" />
      <!--页面主体，底部区域-->
      <!-- <div class="bottom">
        <div class="copyright">
          Copyright(C) 研一智控 All Rights Reserved
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
  //条码扫描仪按键处理函数
  function barCode_Proc(e) {
    var keyChar = String.fromCharCode(e.which);
    if (keyChar == "\r") {
      var scaner_buffer = $(this).data("barcode-scaner-buffer");
      $(this).data("barcode-scaner-buffer", "");
      e.data.proc(scaner_buffer);
    } else {
      var scaner_buffer = $(this).data("barcode-scaner-buffer");
      if (scaner_buffer == undefined) {
        scaner_buffer = "";
      }
      scaner_buffer += keyChar;
      $(this).data("barcode-scaner-buffer", scaner_buffer);
    }
  }
  //条码扫描仪jQuery拓展方法
  jQuery.fn.extend({
    barCodeScanerModeEnter: function (findBarCode_Event) {
  
      $(this).data("barcode-scaner-buffer", "");
      $(this).off("keypress", barCode_Proc);
      $(this).on("keypress", {
        proc: findBarCode_Event
      }, barCode_Proc);
    },
    barCodeScanerModeExit: function () {
      $(this).data("barcode-scaner-buffer", "");
      $(this).off("keypress", barCode_Proc);
    }
  });
  export default {
    name: "App",
    data() {
      return {
        pageTitle: "",
        timeStr: "",
        dateStr: "",
        countDownTimer: 60,
        userInfo: null,
        clientInfo: null,
        startUpTime: 0,
        startRunTime: 0,
        layerIndex: 0,
        currentInfo: null,
        warningColor:'#FFF',
        warningCount:'0',
        temControlflowStr:"未进行",
      }
    },
    computed: {
      timeDefaultFormat: function () {
        return (
          padLeft(getHours(), 2, "0") +
          ":" +
          padLeft(getMinutes(), 2, "0") +
          ":" +
          padLeft(getSeconds(), 2, "0")
        );
      },
      dateDefaultFormat: function () {
        return (
          padLeft(getYear(), 4, "0") +
          "-" +
          padLeft(getMonth(), 2, "0") +
          "-" +
          padLeft(getDate(), 2, "0") +
          " " +
          getDay()
        );
      },

    },
    methods: {
      filterNoWarningToday: function () {
        Cab.FilterNoWarningToday();
      },
      //内置功能————————————————————————————————————————————————————————————————————————————————————————————————————
      //获得默认格式的时间
      getTimeDefaultFormat: function () {
        return (
          padLeft(getHours(), 2, "0") +
          ":" +
          padLeft(getMinutes(), 2, "0") +
          ":" +
          padLeft(getSeconds(), 2, "0")
        );
      },
      //获得默认格式的日期
      getDateDefaultFormat: function () {
        return (
          padLeft(getYear(), 4, "0") +
          "-" +
          padLeft(getMonth(), 2, "0") +
          "-" +
          padLeft(getDate(), 2, "0") +
          " " +
          getDay()
        );
      },
      //日期时间更新方法
      updateDateTime: function () {
        this.timeStr = this.getTimeDefaultFormat();
        this.dateStr = this.getDateDefaultFormat();
      },
      //倒计时更新方法，调用倒计时超时事件
      updateCountDownTimer: function () {
        this.countDownTimer--;
        if (this.countDownTimer == 0) {
          this.countDownTimerEvent();
        }
      },
      faceAdd:function(){
        this.go('/addFace',{userInfo:this.userInfo});

      },
      //用户退出方法
      userSignOut: function () {
        this.userInfo = null;
        this.go("/standby");
      },

      // 关闭电源
      shutdownPower: function(){
        layer.confirm('您确定要关闭电源？', {
          btn: ['确定','取消'], skin: 'layer-custom', title: '提示' //按钮
        }, function(){
          // P_User.shutdownLinux()
          P_Client.closeSystem();
        }, function(){
          return
        });
 
      },

       // 查看或修改用户信息点击事件
      userifoUpdate: function(){
        this.go("/userinfo")
      },

        // 用户修改密码方法
      pwdUpdate: function(){
        this.go('/userPwdUpdate')
      },


      // 退出系统
      LogOut: function(){
        layer.confirm('您确定要退出程序？', {
          btn: ['确定','取消'], skin: 'layer-custom', title: '提示' //按钮
        }, function(){
          //  P_User.exit()
          P_Client.quitSystem();
        }, function(){
          return
        });
      //  this.$confirm('确定要取消领用药剂', '提示', {
      //           type: 'warning'
      //         }).then(function(result){
                
      //             layer.alert(12132)
      //         });

       },

      //使用药剂柜方法
      useCabinet: function () {
        try {
          Cab.Use();
        } catch (e) {}
      },
      //离开药剂柜方法
      leaveCabinet: function () {
        try {
          Cab.Leave();
        } catch (e) {}
      },

      //激活App操作界面事件，用户点击或者是条码扫描
      appActive: function () {
        //alert(this.$refs.child.$options.name);
        //this.$router.push({ path: '/Login' });
        //this.go("/login");

        this.countDownTimer = this.$refs.child.countDownTimerMax;
      },
      //倒计时结束事件
      countDownTimerEvent: function () {
        this.userSignOut();

      },
      //开门事件
      doorOpenEvent: function () {},
      //关门事件
      doorCloseEvent: function () {},
      //门没关预警事件
      doorNotCloseWarningEvent: function () {
        this.showToast("柜门长时间未关闭，请关闭柜门");
      },
      //滤芯预警事件
      filterWarningEvent: function (info) {
        this.showToast("滤芯即将到期：" + info);
      },
      //湿度超高预警事件
      humMaxWarningEvent: function (num) {
        this.showToast("当前湿度 " + num + "% 超过湿度最大值！");
      },
      //湿度超低预警事件
      humMinWarningEvent: function (num) {
        this.showToast("当前湿度 " + num + "% 低于湿度最小值！");
      },
      //温度超高预警事件
      temMaxWarningEvent: function (num) {
        this.showToast("当前温度 " + num + "℃ 超过温度最大值！");
      },
      //温度抄底预警事件
      temMinWarningEvent: function (num) {
        this.showToast("当前温度 " + num + "℃ 超过温度最小值！");
      },
      //用户信息点击事件
      userInfoClickEvent: function () {
        this.userMenuShow = !this.userMenuShow;
        if (this.userMenuShow) {
          var that = this;
          setTimeout(function () {
            that.userMenuShow = false;
          }, 6000);
        }
      },
      //用户详细信息菜单点击事件
      userDetailClickEvent: function () {
        goto("userInfoDetail.html");
      },
      //用户登出菜单点击事件
      setClientInfoCallback: function (obj) {

      },
      sysControlDisplay:function(cmd){

        switch (cmd) {
          case 'home':
          this.go('/standby')
            break;
          case 'doorWarning':
           this.$toast.error("请关闭柜门！");
           break;
           case 'rfidWarning':
           this.$toast.error("检测到非法RFID标签！");
           break;
           case 'weighWarning':
           this.$toast.error("当前归还药剂未称重！");
           break;
          default:
            break;
        }
      },
     
      //条码登录
      userLoginByCode: function (barCode) {
        P_User.userLoginByCode(barCode);
        this.layerIndex = layer.load(2);
      },
      //条码登录回调
      userLoginByCodeCallback: function (obj) {
        layer.close(this.layerIndex);
        if (obj.status == 1) {
          this.$toast.error(obj.message);
        } else {
          this.userInfo = obj.data;
          console.log(this.userInfo, 8888)
          this.currentInfo={
            UserId: this.userInfo.UserId,
            RoleId: this.userInfo.RoleId,
            UserRealName: this.userInfo.RealName,
            RoleName: this.userInfo.RoleName,
            Sex: this.userInfo.Sex,
            QQ: this.userInfo.QQ,
            CreateDate: this.userInfo.CreateDate,
            Mobile: this.userInfo.Mobile,
            ClientId: this.clientInfo.ClientId,
            ClientCode: this.clientInfo.ClientCode,
            CustomerId:this.clientInfo.CustomerId,
          };
          this.go("/menu");
        }
      },
      //点击预警报警按钮触发
      warningClick:function(){
        if(this.userInfo==null)
        {
          this.go("/login");
        }
        else
        {
          this.go("/warningManagement");

        }
      }
    },
    mounted: function () {

      this.startUpTime = getTimeStamp();
      //初始化与更新日期时间，定时器
      var that = this;

      that.updateDateTime();
      setInterval(function () {

        that.updateDateTime();
        if (that.countDownTimer > 0) {
          that.updateCountDownTimer();
        }
        if (that.clientInfo != null) {
          that.clientInfo.TotalRunTime = that.startRunTime + parseInt((getTimeStamp() - that.startUpTime) / 1000);
          if (new Date().getSeconds() % 20 == 0) {
            P_Client.pageSetClientInfo(JSON.stringify(that.clientInfo));
          }
          if (new Date().getSeconds() % 3 == 0) {
            P_Client.getStandbyInfoNew(that.clientInfo.CustomerId,function (result) {
                    var obj = JSON.parse(result);
                    // that.$toast.error(obj.data.Tem);
                    that.warningCount=obj.data.totalWarningCount;

            });
          }

        }
      }, 1000);
      // setInterval(function(){
      //   if(that.warningColor=='#FFF')
      //   {
      //     that.warningColor="red";
      //   }
      //   else
      //   {
      //     that.warningColor="#FFF";
      //   }
      // },500);
    }
  };
</script>
